<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>地图应用</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <script type="text/javascript"
            src="http://api.map.baidu.com/api?v=3.0&ak=lajkK4CVR7G1XLoioIIcYW9S2Sl73nkY"></script>
    <script>
        "function" != typeof Object.create && (Object.create = function (t) {
            function o() {
            }

            return o.prototype = t, new o
        }), function (t, o, i, s) {
            "use strict";
            var n = {
                _positionClasses: ["bottom-left", "bottom-right", "top-right", "top-left", "bottom-center", "top-center", "mid-center"],
                _defaultIcons: ["success", "error", "info", "warning"],
                init: function (o, i) {
                    this.prepareOptions(o, t.toast.options), this.process()
                },
                prepareOptions: function (o, i) {
                    var s = {};
                    "string" == typeof o || o instanceof Array ? s.text = o : s = o, this.options = t.extend({}, i, s)
                },
                process: function () {
                    this.setup(), this.addToDom(), this.position(), this.bindToast(), this.animate()
                },
                setup: function () {
                    var o = "";
                    if (this._toastEl = this._toastEl || t("<div></div>", {class: "jq-toast-single"}), o += '<span class="jq-toast-loader"></span>', this.options.allowToastClose && (o += '<span class="close-jq-toast-single">&times;</span>'), this.options.text instanceof Array) {
                        this.options.heading && (o += '<h2 class="jq-toast-heading">' + this.options.heading + "</h2>"), o += '<ul class="jq-toast-ul">';
                        for (var i = 0; i < this.options.text.length; i++) o += '<li class="jq-toast-li" id="jq-toast-item-' + i + '">' + this.options.text[i] + "</li>";
                        o += "</ul>"
                    } else this.options.heading && (o += '<h2 class="jq-toast-heading">' + this.options.heading + "</h2>"), o += this.options.text;
                    this._toastEl.html(o), !1 !== this.options.bgColor && this._toastEl.css("background-color", this.options.bgColor), !1 !== this.options.textColor && this._toastEl.css("color", this.options.textColor), this.options.textAlign && this._toastEl.css("text-align", this.options.textAlign), !1 !== this.options.icon && (this._toastEl.addClass("jq-has-icon"), -1 !== t.inArray(this.options.icon, this._defaultIcons) && this._toastEl.addClass("jq-icon-" + this.options.icon)), !1 !== this.options.class && this._toastEl.addClass(this.options.class)
                },
                position: function () {
                    "string" == typeof this.options.position && -1 !== t.inArray(this.options.position, this._positionClasses) ? "bottom-center" === this.options.position ? this._container.css({
                        left: t(o).outerWidth() / 2 - this._container.outerWidth() / 2,
                        bottom: 20
                    }) : "top-center" === this.options.position ? this._container.css({
                        left: t(o).outerWidth() / 2 - this._container.outerWidth() / 2,
                        top: 20
                    }) : "mid-center" === this.options.position ? this._container.css({
                        left: t(o).outerWidth() / 2 - this._container.outerWidth() / 2,
                        top: t(o).outerHeight() / 2 - this._container.outerHeight() / 2
                    }) : this._container.addClass(this.options.position) : "object" == typeof this.options.position ? this._container.css({
                        top: this.options.position.top ? this.options.position.top : "auto",
                        bottom: this.options.position.bottom ? this.options.position.bottom : "auto",
                        left: this.options.position.left ? this.options.position.left : "auto",
                        right: this.options.position.right ? this.options.position.right : "auto"
                    }) : this._container.addClass("bottom-left")
                },
                bindToast: function () {
                    var t = this;
                    this._toastEl.on("afterShown", function () {
                        t.processLoader()
                    }), this._toastEl.find(".close-jq-toast-single").on("click", function (o) {
                        o.preventDefault(), "fade" === t.options.showHideTransition ? (t._toastEl.trigger("beforeHide"), t._toastEl.fadeOut(function () {
                            t._toastEl.trigger("afterHidden")
                        })) : "slide" === t.options.showHideTransition ? (t._toastEl.trigger("beforeHide"), t._toastEl.slideUp(function () {
                            t._toastEl.trigger("afterHidden")
                        })) : (t._toastEl.trigger("beforeHide"), t._toastEl.hide(function () {
                            t._toastEl.trigger("afterHidden")
                        }))
                    }), "function" == typeof this.options.beforeShow && this._toastEl.on("beforeShow", function () {
                        t.options.beforeShow(t._toastEl)
                    }), "function" == typeof this.options.afterShown && this._toastEl.on("afterShown", function () {
                        t.options.afterShown(t._toastEl)
                    }), "function" == typeof this.options.beforeHide && this._toastEl.on("beforeHide", function () {
                        t.options.beforeHide(t._toastEl)
                    }), "function" == typeof this.options.afterHidden && this._toastEl.on("afterHidden", function () {
                        t.options.afterHidden(t._toastEl)
                    }), "function" == typeof this.options.onClick && this._toastEl.on("click", function () {
                        t.options.onClick(t._toastEl)
                    })
                },
                addToDom: function () {
                    var o = t(".jq-toast-wrap");
                    if (0 === o.length ? (o = t("<div></div>", {
                        class: "jq-toast-wrap",
                        role: "alert",
                        "aria-live": "polite"
                    }), t("body").append(o)) : this.options.stack && !isNaN(parseInt(this.options.stack, 10)) || o.empty(), o.find(".jq-toast-single:hidden").remove(), o.append(this._toastEl), this.options.stack && !isNaN(parseInt(this.options.stack), 10)) {
                        var i = o.find(".jq-toast-single").length - this.options.stack;
                        i > 0 && t(".jq-toast-wrap").find(".jq-toast-single").slice(0, i).remove()
                    }
                    this._container = o
                },
                canAutoHide: function () {
                    return !1 !== this.options.hideAfter && !isNaN(parseInt(this.options.hideAfter, 10))
                },
                processLoader: function () {
                    if (!this.canAutoHide() || !1 === this.options.loader) return !1;
                    var t = this._toastEl.find(".jq-toast-loader"), o = (this.options.hideAfter - 400) / 1e3 + "s",
                        i = this.options.loaderBg, s = t.attr("style") || "";
                    s = s.substring(0, s.indexOf("-webkit-transition")), s += "-webkit-transition: width " + o + " ease-in;                       -o-transition: width " + o + " ease-in;                       transition: width " + o + " ease-in;                       background-color: " + i + ";", t.attr("style", s).addClass("jq-toast-loaded")
                },
                animate: function () {
                    t = this;
                    if (this._toastEl.hide(), this._toastEl.trigger("beforeShow"), "fade" === this.options.showHideTransition.toLowerCase() ? this._toastEl.fadeIn(function () {
                        t._toastEl.trigger("afterShown")
                    }) : "slide" === this.options.showHideTransition.toLowerCase() ? this._toastEl.slideDown(function () {
                        t._toastEl.trigger("afterShown")
                    }) : this._toastEl.show(function () {
                        t._toastEl.trigger("afterShown")
                    }), this.canAutoHide()) {
                        var t = this;
                        o.setTimeout(function () {
                            "fade" === t.options.showHideTransition.toLowerCase() ? (t._toastEl.trigger("beforeHide"), t._toastEl.fadeOut(function () {
                                t._toastEl.trigger("afterHidden")
                            })) : "slide" === t.options.showHideTransition.toLowerCase() ? (t._toastEl.trigger("beforeHide"), t._toastEl.slideUp(function () {
                                t._toastEl.trigger("afterHidden")
                            })) : (t._toastEl.trigger("beforeHide"), t._toastEl.hide(function () {
                                t._toastEl.trigger("afterHidden")
                            }))
                        }, this.options.hideAfter)
                    }
                },
                reset: function (o) {
                    "all" === o ? t(".jq-toast-wrap").remove() : this._toastEl.remove()
                },
                update: function (t) {
                    this.prepareOptions(t, this.options), this.setup(), this.bindToast()
                },
                close: function () {
                    this._toastEl.find(".close-jq-toast-single").click()
                }
            };
            t.toast = function (t) {
                var o = Object.create(n);
                return o.init(t, this), {
                    reset: function (t) {
                        o.reset(t)
                    }, update: function (t) {
                        o.update(t)
                    }, close: function () {
                        o.close()
                    }
                }
            }, t.toast.options = {
                text: "",
                heading: "",
                showHideTransition: "fade",
                allowToastClose: !0,
                hideAfter: 3e3,
                loader: !0,
                loaderBg: "#9EC600",
                stack: 5,
                position: "bottom-left",
                bgColor: !1,
                textColor: !1,
                textAlign: "left",
                icon: !1,
                beforeShow: function () {
                },
                afterShown: function () {
                },
                beforeHide: function () {
                },
                afterHidden: function () {
                },
                onClick: function () {
                }
            }
        }(jQuery, window, document);
    </script>
    <style>
        .jq-toast-wrap, .jq-toast-wrap * {
            margin: 0;
            padding: 0
        }

        .jq-toast-wrap {
            display: block;
            position: fixed;
            width: 250px;
            pointer-events: none !important;
            letter-spacing: normal;
            z-index: 9000 !important
        }

        .jq-toast-wrap.bottom-left {
            bottom: 20px;
            left: 20px
        }

        .jq-toast-wrap.bottom-right {
            bottom: 20px;
            right: 40px
        }

        .jq-toast-wrap.top-left {
            top: 20px;
            left: 20px
        }

        .jq-toast-wrap.top-right {
            top: 20px;
            right: 40px
        }

        .jq-toast-single {
            display: block;
            width: 100%;
            padding: 10px;
            margin: 0 0 5px;
            border-radius: 4px;
            font-size: 12px;
            font-family: arial, sans-serif;
            line-height: 17px;
            position: relative;
            pointer-events: all !important;
            background-color: #444;
            color: #fff
        }

        .jq-toast-single h2 {
            font-family: arial, sans-serif;
            font-size: 14px;
            margin: 0 0 7px;
            background: 0 0;
            color: inherit;
            line-height: inherit;
            letter-spacing: normal
        }

        .jq-toast-single a {
            color: #eee;
            text-decoration: none;
            font-weight: 700;
            border-bottom: 1px solid #fff;
            padding-bottom: 3px;
            font-size: 12px
        }

        .jq-toast-single ul {
            margin: 0 0 0 15px;
            background: 0 0;
            padding: 0
        }

        .jq-toast-single ul li {
            list-style-type: disc !important;
            line-height: 17px;
            background: 0 0;
            margin: 0;
            padding: 0;
            letter-spacing: normal
        }

        .close-jq-toast-single {
            position: absolute;
            top: 3px;
            right: 7px;
            font-size: 14px;
            cursor: pointer
        }

        .jq-toast-loader {
            display: block;
            position: absolute;
            top: -2px;
            height: 5px;
            width: 0;
            left: 0;
            border-radius: 5px;
            background: red
        }

        .jq-toast-loaded {
            width: 100%
        }

        .jq-has-icon {
            padding: 10px 10px 10px 50px;
            background-repeat: no-repeat;
            background-position: 10px
        }

        .jq-icon-info {
            background-image: url();
            background-color: #31708f;
            color: #d9edf7;
            border-color: #bce8f1
        }

        .jq-icon-warning {
            background-image: url();
            background-color: #8a6d3b;
            color: #fcf8e3;
            border-color: #faebcc
        }

        .jq-icon-error {
            background-image: url();
            background-color: #a94442;
            color: #f2dede;
            border-color: #ebccd1
        }

        .jq-icon-success {
            background-image: url();
            color: #dff0d8;
            background-color: #3c763d;
            border-color: #d6e9c6
        }
    </style>
    <style>
        @keyframes ripple {
            0%, 35% {
                transform: scale(0);
                opacity: 1;
            }
            50% {
                /*transform: scale(1.5);*/
                transform: scale(3.5);
                opacity: 0.8;
            }
            100% {
                opacity: 0;
                /*transform: scale(4);*/
                transform: scale(7);
            }
        }

        .ripple-div {
            content: '';
            mix-blend-mode: screen;
            width: 16px;
            height: 16px;
            position: absolute;
            border-radius: 100%;
            transform-origin: 50% 50%;
            background: rgb(203, 0, 5);
            opacity: 0;
            animation: ripple 1.2s ease-out 1;
        }

        html, body {
            margin: 0;
            padding: 0;
            font-family: 'Microsoft YaHei', 'SF Pro Display', Roboto, Noto, Arial, 'PingFang SC', sans-serif;
        }

        .page {
            height: 100vh;
        }

        .drawer-wrapper {
            position: fixed;
            right: 0;
            top: 0;
            bottom: 0;
            width: 300px;
            background: rgba(255, 255, 255, 0.5);
            z-index: 999;
            padding: 0 8px;
            box-shadow: inset 0px 0px 5px 0 rgba(0, 0, 0, 0.6);
            border-left: 2px solid #e3e8ac;
            transition: all .2s;
            transform: translateX(100%);
        }

        .item-in-drawer {
            background: white;
            margin-bottom: 6px;
            box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.3);
            padding: 6px;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            font-size: 12px;

        }

        .drawer-handle {
            position: absolute;
            left: -12px;
            height: 36px;
            width: 12px;
            top: 0;
            bottom: 0;
            margin: auto 0;
            background: #9EC600;
            border-bottom-left-radius: 3px;
            border-top-left-radius: 3px;
            display: flex;
            justify-content: center;
            cursor: pointer;
        }

        .drawer {
            height: 100%;
        }
        .rfid {
            font-size: 14px;
        }
    </style>
    <style>
        /*
 * Container style
 */
        .ps {
            overflow: hidden !important;
            overflow-anchor: none;
            -ms-overflow-style: none;
            touch-action: auto;
            -ms-touch-action: auto;
        }

        /*
         * Scrollbar rail styles
         */
        .ps__rail-x {
            display: none;
            opacity: 0;
            transition: background-color .2s linear, opacity .2s linear;
            -webkit-transition: background-color .2s linear, opacity .2s linear;
            height: 15px;
            /* there must be 'bottom' or 'top' for ps__rail-x */
            bottom: 0px;
            /* please don't change 'position' */
            position: absolute;
        }

        .ps__rail-y {
            display: none;
            opacity: 0;
            transition: background-color .2s linear, opacity .2s linear;
            -webkit-transition: background-color .2s linear, opacity .2s linear;
            width: 15px;
            /* there must be 'right' or 'left' for ps__rail-y */
            right: 0;
            /* please don't change 'position' */
            position: absolute;
        }

        .ps--active-x > .ps__rail-x,
        .ps--active-y > .ps__rail-y {
            display: block;
            background-color: transparent;
        }

        .ps:hover > .ps__rail-x,
        .ps:hover > .ps__rail-y,
        .ps--focus > .ps__rail-x,
        .ps--focus > .ps__rail-y,
        .ps--scrolling-x > .ps__rail-x,
        .ps--scrolling-y > .ps__rail-y {
            opacity: 0.6;
        }

        .ps .ps__rail-x:hover,
        .ps .ps__rail-y:hover,
        .ps .ps__rail-x:focus,
        .ps .ps__rail-y:focus,
        .ps .ps__rail-x.ps--clicking,
        .ps .ps__rail-y.ps--clicking {
            background-color: #eee;
            opacity: 0.9;
        }

        /*
         * Scrollbar thumb styles
         */
        .ps__thumb-x {
            background-color: #aaa;
            border-radius: 6px;
            transition: background-color .2s linear, height .2s ease-in-out;
            -webkit-transition: background-color .2s linear, height .2s ease-in-out;
            height: 6px;
            /* there must be 'bottom' for ps__thumb-x */
            bottom: 2px;
            /* please don't change 'position' */
            position: absolute;
        }

        .ps__thumb-y {
            background-color: #aaa;
            border-radius: 6px;
            transition: background-color .2s linear, width .2s ease-in-out;
            -webkit-transition: background-color .2s linear, width .2s ease-in-out;
            width: 6px;
            /* there must be 'right' for ps__thumb-y */
            right: 2px;
            /* please don't change 'position' */
            position: absolute;
        }

        .ps__rail-x:hover > .ps__thumb-x,
        .ps__rail-x:focus > .ps__thumb-x,
        .ps__rail-x.ps--clicking .ps__thumb-x {
            background-color: #999;
            height: 11px;
        }

        .ps__rail-y:hover > .ps__thumb-y,
        .ps__rail-y:focus > .ps__thumb-y,
        .ps__rail-y.ps--clicking .ps__thumb-y {
            background-color: #999;
            width: 11px;
        }

        /* MS supports */
        @supports (-ms-overflow-style: none) {
            .ps {
                overflow: auto !important;
            }
        }

        @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
            .ps {
                overflow: auto !important;
            }
        }
    </style>
    <script>
        /*!
 * perfect-scrollbar v1.4.0
 * (c) 2018 Hyunje Jun
 * @license MIT
 */
        !function (t, e) {
            "object" == typeof exports && "undefined" != typeof module ? module.exports = e() : "function" == typeof define && define.amd ? define(e) : t.PerfectScrollbar = e()
        }(this, function () {
            "use strict";

            function t(t) {
                return getComputedStyle(t)
            }

            function e(t, e) {
                for (var i in e) {
                    var r = e[i];
                    "number" == typeof r && (r += "px"), t.style[i] = r
                }
                return t
            }

            function i(t) {
                var e = document.createElement("div");
                return e.className = t, e
            }

            function r(t, e) {
                if (!v) throw new Error("No element matching method supported");
                return v.call(t, e)
            }

            function l(t) {
                t.remove ? t.remove() : t.parentNode && t.parentNode.removeChild(t)
            }

            function n(t, e) {
                return Array.prototype.filter.call(t.children, function (t) {
                    return r(t, e)
                })
            }

            function o(t, e) {
                var i = t.element.classList, r = m.state.scrolling(e);
                i.contains(r) ? clearTimeout(Y[e]) : i.add(r)
            }

            function s(t, e) {
                Y[e] = setTimeout(function () {
                    return t.isAlive && t.element.classList.remove(m.state.scrolling(e))
                }, t.settings.scrollingThreshold)
            }

            function a(t, e) {
                o(t, e), s(t, e)
            }

            function c(t) {
                if ("function" == typeof window.CustomEvent) return new CustomEvent(t);
                var e = document.createEvent("CustomEvent");
                return e.initCustomEvent(t, !1, !1, void 0), e
            }

            function h(t, e, i, r, l) {
                var n = i[0], o = i[1], s = i[2], h = i[3], u = i[4], d = i[5];
                void 0 === r && (r = !0), void 0 === l && (l = !1);
                var f = t.element;
                t.reach[h] = null, f[s] < 1 && (t.reach[h] = "start"), f[s] > t[n] - t[o] - 1 && (t.reach[h] = "end"), e && (f.dispatchEvent(c("ps-scroll-" + h)), e < 0 ? f.dispatchEvent(c("ps-scroll-" + u)) : e > 0 && f.dispatchEvent(c("ps-scroll-" + d)), r && a(t, h)), t.reach[h] && (e || l) && f.dispatchEvent(c("ps-" + h + "-reach-" + t.reach[h]))
            }

            function u(t) {
                return parseInt(t, 10) || 0
            }

            function d(t) {
                return r(t, "input,[contenteditable]") || r(t, "select,[contenteditable]") || r(t, "textarea,[contenteditable]") || r(t, "button,[contenteditable]")
            }

            function f(e) {
                var i = t(e);
                return u(i.width) + u(i.paddingLeft) + u(i.paddingRight) + u(i.borderLeftWidth) + u(i.borderRightWidth)
            }

            function p(t, e) {
                return t.settings.minScrollbarLength && (e = Math.max(e, t.settings.minScrollbarLength)), t.settings.maxScrollbarLength && (e = Math.min(e, t.settings.maxScrollbarLength)), e
            }

            function b(t, i) {
                var r = {width: i.railXWidth}, l = Math.floor(t.scrollTop);
                i.isRtl ? r.left = i.negativeScrollAdjustment + t.scrollLeft + i.containerWidth - i.contentWidth : r.left = t.scrollLeft, i.isScrollbarXUsingBottom ? r.bottom = i.scrollbarXBottom - l : r.top = i.scrollbarXTop + l, e(i.scrollbarXRail, r);
                var n = {top: l, height: i.railYHeight};
                i.isScrollbarYUsingRight ? i.isRtl ? n.right = i.contentWidth - (i.negativeScrollAdjustment + t.scrollLeft) - i.scrollbarYRight - i.scrollbarYOuterWidth : n.right = i.scrollbarYRight - t.scrollLeft : i.isRtl ? n.left = i.negativeScrollAdjustment + t.scrollLeft + 2 * i.containerWidth - i.contentWidth - i.scrollbarYLeft - i.scrollbarYOuterWidth : n.left = i.scrollbarYLeft + t.scrollLeft, e(i.scrollbarYRail, n), e(i.scrollbarX, {
                    left: i.scrollbarXLeft,
                    width: i.scrollbarXWidth - i.railBorderXWidth
                }), e(i.scrollbarY, {top: i.scrollbarYTop, height: i.scrollbarYHeight - i.railBorderYWidth})
            }

            function g(t, e) {
                function i(e) {
                    b[d] = g + Y * (e[a] - v), o(t, f), R(t), e.stopPropagation(), e.preventDefault()
                }

                function r() {
                    s(t, f), t[p].classList.remove(m.state.clicking), t.event.unbind(t.ownerDocument, "mousemove", i)
                }

                var l = e[0], n = e[1], a = e[2], c = e[3], h = e[4], u = e[5], d = e[6], f = e[7], p = e[8],
                    b = t.element, g = null, v = null, Y = null;
                t.event.bind(t[h], "mousedown", function (e) {
                    g = b[d], v = e[a], Y = (t[n] - t[l]) / (t[c] - t[u]), t.event.bind(t.ownerDocument, "mousemove", i), t.event.once(t.ownerDocument, "mouseup", r), t[p].classList.add(m.state.clicking), e.stopPropagation(), e.preventDefault()
                })
            }

            var v = "undefined" != typeof Element && (Element.prototype.matches || Element.prototype.webkitMatchesSelector || Element.prototype.mozMatchesSelector || Element.prototype.msMatchesSelector),
                m = {
                    main: "ps", element: {
                        thumb: function (t) {
                            return "ps__thumb-" + t
                        }, rail: function (t) {
                            return "ps__rail-" + t
                        }, consuming: "ps__child--consume"
                    }, state: {
                        focus: "ps--focus", clicking: "ps--clicking", active: function (t) {
                            return "ps--active-" + t
                        }, scrolling: function (t) {
                            return "ps--scrolling-" + t
                        }
                    }
                }, Y = {x: null, y: null}, X = function (t) {
                    this.element = t, this.handlers = {}
                }, w = {isEmpty: {configurable: !0}};
            X.prototype.bind = function (t, e) {
                void 0 === this.handlers[t] && (this.handlers[t] = []), this.handlers[t].push(e), this.element.addEventListener(t, e, !1)
            }, X.prototype.unbind = function (t, e) {
                var i = this;
                this.handlers[t] = this.handlers[t].filter(function (r) {
                    return !(!e || r === e) || (i.element.removeEventListener(t, r, !1), !1)
                })
            }, X.prototype.unbindAll = function () {
                var t = this;
                for (var e in t.handlers) t.unbind(e)
            }, w.isEmpty.get = function () {
                var t = this;
                return Object.keys(this.handlers).every(function (e) {
                    return 0 === t.handlers[e].length
                })
            }, Object.defineProperties(X.prototype, w);
            var y = function () {
                this.eventElements = []
            };
            y.prototype.eventElement = function (t) {
                var e = this.eventElements.filter(function (e) {
                    return e.element === t
                })[0];
                return e || (e = new X(t), this.eventElements.push(e)), e
            }, y.prototype.bind = function (t, e, i) {
                this.eventElement(t).bind(e, i)
            }, y.prototype.unbind = function (t, e, i) {
                var r = this.eventElement(t);
                r.unbind(e, i), r.isEmpty && this.eventElements.splice(this.eventElements.indexOf(r), 1)
            }, y.prototype.unbindAll = function () {
                this.eventElements.forEach(function (t) {
                    return t.unbindAll()
                }), this.eventElements = []
            }, y.prototype.once = function (t, e, i) {
                var r = this.eventElement(t), l = function (t) {
                    r.unbind(e, l), i(t)
                };
                r.bind(e, l)
            };
            var W = function (t, e, i, r, l) {
                void 0 === r && (r = !0), void 0 === l && (l = !1);
                var n;
                if ("top" === e) n = ["contentHeight", "containerHeight", "scrollTop", "y", "up", "down"]; else {
                    if ("left" !== e) throw new Error("A proper axis should be provided");
                    n = ["contentWidth", "containerWidth", "scrollLeft", "x", "left", "right"]
                }
                h(t, i, n, r, l)
            }, L = {
                isWebKit: "undefined" != typeof document && "WebkitAppearance" in document.documentElement.style,
                supportsTouch: "undefined" != typeof window && ("ontouchstart" in window || window.DocumentTouch && document instanceof window.DocumentTouch),
                supportsIePointer: "undefined" != typeof navigator && navigator.msMaxTouchPoints,
                isChrome: "undefined" != typeof navigator && /Chrome/i.test(navigator && navigator.userAgent)
            }, R = function (t) {
                var e = t.element, i = Math.floor(e.scrollTop);
                t.containerWidth = e.clientWidth, t.containerHeight = e.clientHeight, t.contentWidth = e.scrollWidth, t.contentHeight = e.scrollHeight, e.contains(t.scrollbarXRail) || (n(e, m.element.rail("x")).forEach(function (t) {
                    return l(t)
                }), e.appendChild(t.scrollbarXRail)), e.contains(t.scrollbarYRail) || (n(e, m.element.rail("y")).forEach(function (t) {
                    return l(t)
                }), e.appendChild(t.scrollbarYRail)), !t.settings.suppressScrollX && t.containerWidth + t.settings.scrollXMarginOffset < t.contentWidth ? (t.scrollbarXActive = !0, t.railXWidth = t.containerWidth - t.railXMarginWidth, t.railXRatio = t.containerWidth / t.railXWidth, t.scrollbarXWidth = p(t, u(t.railXWidth * t.containerWidth / t.contentWidth)), t.scrollbarXLeft = u((t.negativeScrollAdjustment + e.scrollLeft) * (t.railXWidth - t.scrollbarXWidth) / (t.contentWidth - t.containerWidth))) : t.scrollbarXActive = !1, !t.settings.suppressScrollY && t.containerHeight + t.settings.scrollYMarginOffset < t.contentHeight ? (t.scrollbarYActive = !0, t.railYHeight = t.containerHeight - t.railYMarginHeight, t.railYRatio = t.containerHeight / t.railYHeight, t.scrollbarYHeight = p(t, u(t.railYHeight * t.containerHeight / t.contentHeight)), t.scrollbarYTop = u(i * (t.railYHeight - t.scrollbarYHeight) / (t.contentHeight - t.containerHeight))) : t.scrollbarYActive = !1, t.scrollbarXLeft >= t.railXWidth - t.scrollbarXWidth && (t.scrollbarXLeft = t.railXWidth - t.scrollbarXWidth), t.scrollbarYTop >= t.railYHeight - t.scrollbarYHeight && (t.scrollbarYTop = t.railYHeight - t.scrollbarYHeight), b(e, t), t.scrollbarXActive ? e.classList.add(m.state.active("x")) : (e.classList.remove(m.state.active("x")), t.scrollbarXWidth = 0, t.scrollbarXLeft = 0, e.scrollLeft = 0), t.scrollbarYActive ? e.classList.add(m.state.active("y")) : (e.classList.remove(m.state.active("y")), t.scrollbarYHeight = 0, t.scrollbarYTop = 0, e.scrollTop = 0)
            }, T = {
                "click-rail": function (t) {
                    t.event.bind(t.scrollbarY, "mousedown", function (t) {
                        return t.stopPropagation()
                    }), t.event.bind(t.scrollbarYRail, "mousedown", function (e) {
                        var i = e.pageY - window.pageYOffset - t.scrollbarYRail.getBoundingClientRect().top > t.scrollbarYTop ? 1 : -1;
                        t.element.scrollTop += i * t.containerHeight, R(t), e.stopPropagation()
                    }), t.event.bind(t.scrollbarX, "mousedown", function (t) {
                        return t.stopPropagation()
                    }), t.event.bind(t.scrollbarXRail, "mousedown", function (e) {
                        var i = e.pageX - window.pageXOffset - t.scrollbarXRail.getBoundingClientRect().left > t.scrollbarXLeft ? 1 : -1;
                        t.element.scrollLeft += i * t.containerWidth, R(t), e.stopPropagation()
                    })
                }, "drag-thumb": function (t) {
                    g(t, ["containerWidth", "contentWidth", "pageX", "railXWidth", "scrollbarX", "scrollbarXWidth", "scrollLeft", "x", "scrollbarXRail"]), g(t, ["containerHeight", "contentHeight", "pageY", "railYHeight", "scrollbarY", "scrollbarYHeight", "scrollTop", "y", "scrollbarYRail"])
                }, keyboard: function (t) {
                    function e(e, r) {
                        var l = Math.floor(i.scrollTop);
                        if (0 === e) {
                            if (!t.scrollbarYActive) return !1;
                            if (0 === l && r > 0 || l >= t.contentHeight - t.containerHeight && r < 0) return !t.settings.wheelPropagation
                        }
                        var n = i.scrollLeft;
                        if (0 === r) {
                            if (!t.scrollbarXActive) return !1;
                            if (0 === n && e < 0 || n >= t.contentWidth - t.containerWidth && e > 0) return !t.settings.wheelPropagation
                        }
                        return !0
                    }

                    var i = t.element, l = function () {
                        return r(i, ":hover")
                    }, n = function () {
                        return r(t.scrollbarX, ":focus") || r(t.scrollbarY, ":focus")
                    };
                    t.event.bind(t.ownerDocument, "keydown", function (r) {
                        if (!(r.isDefaultPrevented && r.isDefaultPrevented() || r.defaultPrevented) && (l() || n())) {
                            var o = document.activeElement ? document.activeElement : t.ownerDocument.activeElement;
                            if (o) {
                                if ("IFRAME" === o.tagName) o = o.contentDocument.activeElement; else for (; o.shadowRoot;) o = o.shadowRoot.activeElement;
                                if (d(o)) return
                            }
                            var s = 0, a = 0;
                            switch (r.which) {
                                case 37:
                                    s = r.metaKey ? -t.contentWidth : r.altKey ? -t.containerWidth : -30;
                                    break;
                                case 38:
                                    a = r.metaKey ? t.contentHeight : r.altKey ? t.containerHeight : 30;
                                    break;
                                case 39:
                                    s = r.metaKey ? t.contentWidth : r.altKey ? t.containerWidth : 30;
                                    break;
                                case 40:
                                    a = r.metaKey ? -t.contentHeight : r.altKey ? -t.containerHeight : -30;
                                    break;
                                case 32:
                                    a = r.shiftKey ? t.containerHeight : -t.containerHeight;
                                    break;
                                case 33:
                                    a = t.containerHeight;
                                    break;
                                case 34:
                                    a = -t.containerHeight;
                                    break;
                                case 36:
                                    a = t.contentHeight;
                                    break;
                                case 35:
                                    a = -t.contentHeight;
                                    break;
                                default:
                                    return
                            }
                            t.settings.suppressScrollX && 0 !== s || t.settings.suppressScrollY && 0 !== a || (i.scrollTop -= a, i.scrollLeft += s, R(t), e(s, a) && r.preventDefault())
                        }
                    })
                }, wheel: function (e) {
                    function i(t, i) {
                        var r = Math.floor(o.scrollTop), l = 0 === o.scrollTop,
                            n = r + o.offsetHeight === o.scrollHeight, s = 0 === o.scrollLeft,
                            a = o.scrollLeft + o.offsetWidth === o.scrollWidth;
                        return !(Math.abs(i) > Math.abs(t) ? l || n : s || a) || !e.settings.wheelPropagation
                    }

                    function r(t) {
                        var e = t.deltaX, i = -1 * t.deltaY;
                        return void 0 !== e && void 0 !== i || (e = -1 * t.wheelDeltaX / 6, i = t.wheelDeltaY / 6), t.deltaMode && 1 === t.deltaMode && (e *= 10, i *= 10), e !== e && i !== i && (e = 0, i = t.wheelDelta), t.shiftKey ? [-i, -e] : [e, i]
                    }

                    function l(e, i, r) {
                        if (!L.isWebKit && o.querySelector("select:focus")) return !0;
                        if (!o.contains(e)) return !1;
                        for (var l = e; l && l !== o;) {
                            if (l.classList.contains(m.element.consuming)) return !0;
                            var n = t(l);
                            if ([n.overflow, n.overflowX, n.overflowY].join("").match(/(scroll|auto)/)) {
                                var s = l.scrollHeight - l.clientHeight;
                                if (s > 0 && !(0 === l.scrollTop && r > 0 || l.scrollTop === s && r < 0)) return !0;
                                var a = l.scrollWidth - l.clientWidth;
                                if (a > 0 && !(0 === l.scrollLeft && i < 0 || l.scrollLeft === a && i > 0)) return !0
                            }
                            l = l.parentNode
                        }
                        return !1
                    }

                    function n(t) {
                        var n = r(t), s = n[0], a = n[1];
                        if (!l(t.target, s, a)) {
                            var c = !1;
                            e.settings.useBothWheelAxes ? e.scrollbarYActive && !e.scrollbarXActive ? (a ? o.scrollTop -= a * e.settings.wheelSpeed : o.scrollTop += s * e.settings.wheelSpeed, c = !0) : e.scrollbarXActive && !e.scrollbarYActive && (s ? o.scrollLeft += s * e.settings.wheelSpeed : o.scrollLeft -= a * e.settings.wheelSpeed, c = !0) : (o.scrollTop -= a * e.settings.wheelSpeed, o.scrollLeft += s * e.settings.wheelSpeed), R(e), (c = c || i(s, a)) && !t.ctrlKey && (t.stopPropagation(), t.preventDefault())
                        }
                    }

                    var o = e.element;
                    void 0 !== window.onwheel ? e.event.bind(o, "wheel", n) : void 0 !== window.onmousewheel && e.event.bind(o, "mousewheel", n)
                }, touch: function (e) {
                    function i(t, i) {
                        var r = Math.floor(h.scrollTop), l = h.scrollLeft, n = Math.abs(t), o = Math.abs(i);
                        if (o > n) {
                            if (i < 0 && r === e.contentHeight - e.containerHeight || i > 0 && 0 === r) return 0 === window.scrollY && i > 0 && L.isChrome
                        } else if (n > o && (t < 0 && l === e.contentWidth - e.containerWidth || t > 0 && 0 === l)) return !0;
                        return !0
                    }

                    function r(t, i) {
                        h.scrollTop -= i, h.scrollLeft -= t, R(e)
                    }

                    function l(t) {
                        return t.targetTouches ? t.targetTouches[0] : t
                    }

                    function n(t) {
                        return !(t.pointerType && "pen" === t.pointerType && 0 === t.buttons || (!t.targetTouches || 1 !== t.targetTouches.length) && (!t.pointerType || "mouse" === t.pointerType || t.pointerType === t.MSPOINTER_TYPE_MOUSE))
                    }

                    function o(t) {
                        if (n(t)) {
                            var e = l(t);
                            u.pageX = e.pageX, u.pageY = e.pageY, d = (new Date).getTime(), null !== p && clearInterval(p)
                        }
                    }

                    function s(e, i, r) {
                        if (!h.contains(e)) return !1;
                        for (var l = e; l && l !== h;) {
                            if (l.classList.contains(m.element.consuming)) return !0;
                            var n = t(l);
                            if ([n.overflow, n.overflowX, n.overflowY].join("").match(/(scroll|auto)/)) {
                                var o = l.scrollHeight - l.clientHeight;
                                if (o > 0 && !(0 === l.scrollTop && r > 0 || l.scrollTop === o && r < 0)) return !0;
                                var s = l.scrollLeft - l.clientWidth;
                                if (s > 0 && !(0 === l.scrollLeft && i < 0 || l.scrollLeft === s && i > 0)) return !0
                            }
                            l = l.parentNode
                        }
                        return !1
                    }

                    function a(t) {
                        if (n(t)) {
                            var e = l(t), o = {pageX: e.pageX, pageY: e.pageY}, a = o.pageX - u.pageX,
                                c = o.pageY - u.pageY;
                            if (s(t.target, a, c)) return;
                            r(a, c), u = o;
                            var h = (new Date).getTime(), p = h - d;
                            p > 0 && (f.x = a / p, f.y = c / p, d = h), i(a, c) && t.preventDefault()
                        }
                    }

                    function c() {
                        e.settings.swipeEasing && (clearInterval(p), p = setInterval(function () {
                            e.isInitialized ? clearInterval(p) : f.x || f.y ? Math.abs(f.x) < .01 && Math.abs(f.y) < .01 ? clearInterval(p) : (r(30 * f.x, 30 * f.y), f.x *= .8, f.y *= .8) : clearInterval(p)
                        }, 10))
                    }

                    if (L.supportsTouch || L.supportsIePointer) {
                        var h = e.element, u = {}, d = 0, f = {}, p = null;
                        L.supportsTouch ? (e.event.bind(h, "touchstart", o), e.event.bind(h, "touchmove", a), e.event.bind(h, "touchend", c)) : L.supportsIePointer && (window.PointerEvent ? (e.event.bind(h, "pointerdown", o), e.event.bind(h, "pointermove", a), e.event.bind(h, "pointerup", c)) : window.MSPointerEvent && (e.event.bind(h, "MSPointerDown", o), e.event.bind(h, "MSPointerMove", a), e.event.bind(h, "MSPointerUp", c)))
                    }
                }
            }, H = function (r, l) {
                var n = this;
                if (void 0 === l && (l = {}), "string" == typeof r && (r = document.querySelector(r)), !r || !r.nodeName) throw new Error("no element is specified to initialize PerfectScrollbar");
                this.element = r, r.classList.add(m.main), this.settings = {
                    handlers: ["click-rail", "drag-thumb", "keyboard", "wheel", "touch"],
                    maxScrollbarLength: null,
                    minScrollbarLength: null,
                    scrollingThreshold: 1e3,
                    scrollXMarginOffset: 0,
                    scrollYMarginOffset: 0,
                    suppressScrollX: !1,
                    suppressScrollY: !1,
                    swipeEasing: !0,
                    useBothWheelAxes: !1,
                    wheelPropagation: !0,
                    wheelSpeed: 1
                };
                for (var o in l) n.settings[o] = l[o];
                this.containerWidth = null, this.containerHeight = null, this.contentWidth = null, this.contentHeight = null;
                var s = function () {
                    return r.classList.add(m.state.focus)
                }, a = function () {
                    return r.classList.remove(m.state.focus)
                };
                this.isRtl = "rtl" === t(r).direction, this.isNegativeScroll = function () {
                    var t = r.scrollLeft, e = null;
                    return r.scrollLeft = -1, e = r.scrollLeft < 0, r.scrollLeft = t, e
                }(), this.negativeScrollAdjustment = this.isNegativeScroll ? r.scrollWidth - r.clientWidth : 0, this.event = new y, this.ownerDocument = r.ownerDocument || document, this.scrollbarXRail = i(m.element.rail("x")), r.appendChild(this.scrollbarXRail), this.scrollbarX = i(m.element.thumb("x")), this.scrollbarXRail.appendChild(this.scrollbarX), this.scrollbarX.setAttribute("tabindex", 0), this.event.bind(this.scrollbarX, "focus", s), this.event.bind(this.scrollbarX, "blur", a), this.scrollbarXActive = null, this.scrollbarXWidth = null, this.scrollbarXLeft = null;
                var c = t(this.scrollbarXRail);
                this.scrollbarXBottom = parseInt(c.bottom, 10), isNaN(this.scrollbarXBottom) ? (this.isScrollbarXUsingBottom = !1, this.scrollbarXTop = u(c.top)) : this.isScrollbarXUsingBottom = !0, this.railBorderXWidth = u(c.borderLeftWidth) + u(c.borderRightWidth), e(this.scrollbarXRail, {display: "block"}), this.railXMarginWidth = u(c.marginLeft) + u(c.marginRight), e(this.scrollbarXRail, {display: ""}), this.railXWidth = null, this.railXRatio = null, this.scrollbarYRail = i(m.element.rail("y")), r.appendChild(this.scrollbarYRail), this.scrollbarY = i(m.element.thumb("y")), this.scrollbarYRail.appendChild(this.scrollbarY), this.scrollbarY.setAttribute("tabindex", 0), this.event.bind(this.scrollbarY, "focus", s), this.event.bind(this.scrollbarY, "blur", a), this.scrollbarYActive = null, this.scrollbarYHeight = null, this.scrollbarYTop = null;
                var h = t(this.scrollbarYRail);
                this.scrollbarYRight = parseInt(h.right, 10), isNaN(this.scrollbarYRight) ? (this.isScrollbarYUsingRight = !1, this.scrollbarYLeft = u(h.left)) : this.isScrollbarYUsingRight = !0, this.scrollbarYOuterWidth = this.isRtl ? f(this.scrollbarY) : null, this.railBorderYWidth = u(h.borderTopWidth) + u(h.borderBottomWidth), e(this.scrollbarYRail, {display: "block"}), this.railYMarginHeight = u(h.marginTop) + u(h.marginBottom), e(this.scrollbarYRail, {display: ""}), this.railYHeight = null, this.railYRatio = null, this.reach = {
                    x: r.scrollLeft <= 0 ? "start" : r.scrollLeft >= this.contentWidth - this.containerWidth ? "end" : null,
                    y: r.scrollTop <= 0 ? "start" : r.scrollTop >= this.contentHeight - this.containerHeight ? "end" : null
                }, this.isAlive = !0, this.settings.handlers.forEach(function (t) {
                    return T[t](n)
                }), this.lastScrollTop = Math.floor(r.scrollTop), this.lastScrollLeft = r.scrollLeft, this.event.bind(this.element, "scroll", function (t) {
                    return n.onScroll(t)
                }), R(this)
            };
            return H.prototype.update = function () {
                this.isAlive && (this.negativeScrollAdjustment = this.isNegativeScroll ? this.element.scrollWidth - this.element.clientWidth : 0, e(this.scrollbarXRail, {display: "block"}), e(this.scrollbarYRail, {display: "block"}), this.railXMarginWidth = u(t(this.scrollbarXRail).marginLeft) + u(t(this.scrollbarXRail).marginRight), this.railYMarginHeight = u(t(this.scrollbarYRail).marginTop) + u(t(this.scrollbarYRail).marginBottom), e(this.scrollbarXRail, {display: "none"}), e(this.scrollbarYRail, {display: "none"}), R(this), W(this, "top", 0, !1, !0), W(this, "left", 0, !1, !0), e(this.scrollbarXRail, {display: ""}), e(this.scrollbarYRail, {display: ""}))
            }, H.prototype.onScroll = function (t) {
                this.isAlive && (R(this), W(this, "top", this.element.scrollTop - this.lastScrollTop), W(this, "left", this.element.scrollLeft - this.lastScrollLeft), this.lastScrollTop = Math.floor(this.element.scrollTop), this.lastScrollLeft = this.element.scrollLeft)
            }, H.prototype.destroy = function () {
                this.isAlive && (this.event.unbindAll(), l(this.scrollbarX), l(this.scrollbarY), l(this.scrollbarXRail), l(this.scrollbarYRail), this.removePsClasses(), this.element = null, this.scrollbarX = null, this.scrollbarY = null, this.scrollbarXRail = null, this.scrollbarYRail = null, this.isAlive = !1)
            }, H.prototype.removePsClasses = function () {
                this.element.className = this.element.className.split(" ").filter(function (t) {
                    return !t.match(/^ps([-_].+|)$/)
                }).join(" ")
            }, H
        });
    </script>
</head>
<body>
<div class="page">
    <div style="position: fixed; top: 12px;color: red;left: 0; right: 0; text-align: center;z-index: 999;font-size: 22px;">
        浙江牛盾无源物联捕捉测试 v1.0
    </div>
    <div id="counter-wrapper" style="position: fixed; top: 50px; left: 0; right:  0; text-align: center;z-index: 999; display: flex; justify-content: space-around">
        <h2>衢2019415 <span class="counter" id="counter1" style="color: firebrick;font-size: 30px;text-decoration: underline;">0</span>
        <br>
            <span class="rfid">E280689000000001E86F1280</span>
        </h2>
        <h2>衢1111111 <span class="counter" id="counter2" style="color: firebrick;font-size: 30px;text-decoration: underline;">0</span>
        <br>
            <span class="rfid">E280689000000001E8701F87</span>
        </h2>
        <h2>测试#1 <span class="counter" id="counter3" style="color: firebrick;font-size: 30px;text-decoration: underline;">0</span>
        <br>
            <span class="rfid">E280689000000001E870A2D5</span>
        </h2>
        <h2>测试#2 <span class="counter" id="counter4" style="color: firebrick;font-size: 30px;text-decoration: underline;">0</span>
        <br>
            <span class="rfid">E280689000000001E870A2C5</span>
        </h2>
        <h2>测试#3 <span class="counter" id="counter5" style="color: firebrick;font-size: 30px;text-decoration: underline;">0</span>
        <br>
            <span class="rfid">E280689000000001E870A2B5</span>
        </h2>
        <h2>测试#4 <span class="counter" id="counter6" style="color: firebrick;font-size: 30px;text-decoration: underline;">0</span>
        <br>
            <span class="rfid">E280689000000001E870A87F</span>
        </h2>
        <h2>测试#5 <span class="counter" id="counter7" style="color: firebrick;font-size: 30px;text-decoration: underline;">0</span>
        <br>
            <span class="rfid">E280689000000001E870A861</span>
        </h2>
    </div>
    <div id="container" style="height: 100vh;"></div>
    <div class="drawer-wrapper">
        <div class="drawer" id="drawer">
        </div>
        <div class="drawer-handle">
            <svg height="100%" width="50%" viewBox="-1 -1 8 12"
                 style="transform: rotateZ(180deg);transition: all .2s; -webkit-transform-origin: 50% 50%;-moz-transform-origin: 50% 50%;-ms-transform-origin: 50% 50%;-o-transform-origin: 50% 50%;transform-origin: 50% 50%;">
                <polyline points="0,0 5,5 0,10" stroke="white" stroke-width="2" fill="none"></polyline>
            </svg>
        </div>
    </div>
</div>
</body>
</html>
<script type="text/javascript">
    // 初始化地图，设置中心点坐标和地图级别
    var map = new BMap.Map("container");
    var point = new BMap.Point(118.853537,28.967214);
    // var point2 = new BMap.Point(120.020569, 30.283588);
    map.centerAndZoom(point, 18);
    var marker = new BMap.Marker(point);        // 创建标注
    // var marker2 = new BMap.Marker(point2);
    map.addOverlay(marker);
    // map.addOverlay(marker2);
    map.addControl(new BMap.NavigationControl());
    map.addControl(new BMap.ScaleControl());
    map.addControl(new BMap.OverviewMapControl());
    map.addControl(new BMap.MapTypeControl());

    marker.addEventListener('click', function (e) {
        marker.openInfoWindow(new BMap.InfoWindow("衢州创新大厦", {}));
    });
    // marker2.addEventListener('click', function (e) {
    //     marker2.openInfoWindow(new BMap.InfoWindow("海创园基站2", {}));
    // });
    // 自定义 overlay
    function RippleOverlay(point) {
        this._point = point;
    }

    RippleOverlay.prototype = new BMap.Overlay();
    var rippleDiv = document.createElement("div");
    rippleDiv.classList.add('ripple-div');

    RippleOverlay.prototype.draw = function () {
// 根据地理坐标转换为像素坐标，并设置给容器
        var position = map.pointToOverlayPixel(this._point);
        this._div.style.left = position.x - 8 + "px";
        this._div.style.top = position.y - 8 + "px";
    }

    RippleOverlay.prototype.initialize = function (map) {
        var me = this;
        this._div = rippleDiv.cloneNode();
        map.getPanes().markerPane.appendChild(this._div);
        this._div.addEventListener('animationend', function () {
            map.removeOverlay(me);
        });
        return this._div;
    };

    function addRippleOverlay(point) {
        var rippleOverlay = new RippleOverlay(point);
        map.addOverlay(rippleOverlay);
    }

    var records = {
        'E280689000000001E86F1280': {
            index: 0,
            count: 0
        },
        'E280689000000001E8701F87': {
            index: 1,
            count: 0
        },
        'E280689000000001E870A2D5': {
            index: 2,
            count: 0
        },
        'E280689000000001E870A2C5': {
            index: 3,
            count: 0
        },
        'E280689000000001E870A2B5': {
            index: 4,
            count: 0
        },
        'E280689000000001E870A87F': {
            index: 5,
            count: 0
        },
        'E280689000000001E870A861': {
            index: 6,
            count: 0
        },
    };

    var ws = new WebSocket('ws://127.0.0.1:8889');
    ws.addEventListener('message', function (evt) {
        var data = JSON.parse(evt.data);
        var txt = [
            '时间:' + (new Date(parseInt(data['timestamp']) * 1000)),
            '位置:' + data['longitude'] + ',' + data['latitude'],
            '设备ID:' + data['reader_id'],
            'RFID:' + data['rfid'],
            '车牌:' + '<span style="color: indianred">' + data['plate_no'] + '</span>'
            // '车速:' + (data['velocity'] || ''),
        ].join('<br>');
        // $.toast({
        //     heading: '报告',
        //     text: txt,
        //     position: 'bottom-left',
        //     stack: 4,
        //     // bgColor: '#31708f'
        // });
        addRippleOverlay(new BMap.Point(data['longitude'], data['latitude']));
        drawer.prepend(createItemInDrawer(data));
        if (drawer.children().length > 20) {
            drawer.children('.item-in-drawer').last().remove();
        }

        if (records[data['rfid']]) {
            var r = records[data['rfid']]
            r.count += 1;
            $('#counter-wrapper').children().eq(r.index).find('.counter').html(r.count);
        }
    });

    function createItemInDrawer(data) {
        return $('<div class="item-in-drawer">' + [
            '时间:' + (new Date(parseInt(data['timestamp']) * 1000)),
            '位置:' + data['longitude'] + ',' + data['latitude'],
            '设备ID:' + data['reader_id'],
            'RFID:' + data['rfid'],
            '车牌:' + '<span style="color: indianred">' + data['plate_no'] + '</span>'
            // '车速:' + (data['velocity'] || ''),
        ].join('<br>') + '</div>')
    }

    var drawer = $('#drawer');
    var drawerWrapper = $('.drawer-wrapper');
    var drawerHandle = $('.drawer-handle');
    var isDrawerOpened = false;
    drawerHandle.click(function () {
        if (isDrawerOpened) {
            drawerWrapper.css('transform', 'translateX(100%)');
            drawerHandle.find('svg').css('transform', 'rotateZ(180deg)');
            isDrawerOpened = false;
        } else {
            drawerWrapper.css('transform', 'translateX(0%)');
            drawerHandle.find('svg').css('transform', 'rotateZ(0deg)');
            isDrawerOpened = true;
        }
    });
    var ps = new PerfectScrollbar('.drawer');
    $('#counter-wrapper').find('.counter').each(function(e) {
        $(e).html('0');
    })


</script>